<template>
	<view class="container">
		<view class="header">
			<text class="title">课程列表</text>
			<view class="filter-btn" @click="showFilter">
				<uni-icons type="bars" size="24" color="#4b7bec"></uni-icons>
			</view>
		</view>
		
		<!-- 课程列表 -->
		<view class="course-list">
			<view class="course-item" v-for="(course, index) in courseList" :key="index" @click="viewCourse(course)">
				<image :src="course.cover" mode="aspectFill" class="course-cover"></image>
				<view class="course-info">
					<text class="course-name">{{ course.name }}</text>
					<view class="course-meta">
						<view class="meta-item">
							<uni-icons type="person" size="14" color="#95a5a6"></uni-icons>
							<text>{{ course.teacher }}</text>
						</view>
						<view class="meta-item">
							<uni-icons type="star" size="14" color="#95a5a6"></uni-icons>
							<text>{{ course.rating }}分</text>
						</view>
					</view>
					<view class="course-tags">
						<text class="tag" v-for="(tag, tagIndex) in course.tags" :key="tagIndex">{{ tag }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				courseList: [
					{
						id: 1,
						name: '人体解剖学基础',
						teacher: '张教授',
						rating: 4.8,
						cover: '/static/images/course1.jpg',
						tags: ['基础医学', '解剖学']
					},
					{
						id: 2,
						name: '临床诊断学',
						teacher: '李教授',
						rating: 4.9,
						cover: '/static/images/course2.jpg',
						tags: ['临床医学', '诊断学']
					},
					{
						id: 3,
						name: '药理学导论',
						teacher: '王教授',
						rating: 4.7,
						cover: '/static/images/course3.jpg',
						tags: ['药理学', '基础医学']
					}
				]
			}
		},
		methods: {
			showFilter() {
				// TODO: 显示筛选面板
			},
			viewCourse(course) {
				uni.navigateTo({
					url: `/pages/study/course-detail?id=${course.id}`
				});
			}
		}
	}
</script>

<style lang="scss">
	.container {
		padding: 30rpx;
		background-color: #f8f9fc;
		min-height: 100vh;
	}
	
	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
		
		.title {
			font-size: 36rpx;
			font-weight: 600;
			color: #2c3e50;
		}
		
		.filter-btn {
			width: 60rpx;
			height: 60rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
	
	.course-list {
		.course-item {
			background: #fff;
			border-radius: 12rpx;
			margin-bottom: 20rpx;
			overflow: hidden;
			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
			
			.course-cover {
				width: 100%;
				height: 300rpx;
			}
			
			.course-info {
				padding: 20rpx;
				
				.course-name {
					font-size: 32rpx;
					font-weight: 500;
					color: #2c3e50;
					margin-bottom: 12rpx;
					display: block;
				}
				
				.course-meta {
					display: flex;
					margin-bottom: 12rpx;
					
					.meta-item {
						display: flex;
						align-items: center;
						margin-right: 30rpx;
						font-size: 24rpx;
						color: #95a5a6;
						
						text {
							margin-left: 8rpx;
						}
					}
				}
				
				.course-tags {
					display: flex;
					flex-wrap: wrap;
					
					.tag {
						padding: 4rpx 16rpx;
						background: rgba(75, 123, 236, 0.1);
						color: #4b7bec;
						border-radius: 100rpx;
						font-size: 24rpx;
						margin-right: 12rpx;
						margin-bottom: 8rpx;
					}
				}
			}
		}
	}
</style> 